import {
  type RefObject,
  useEffect,
} from 'react'
import { useMemoizedFn } from '@/library/hooks/use-memoized-fn'

export function useMutationEffect(
  effect: () => void,
  targetRef: RefObject<HTMLElement>,
  options: MutationObserverInit,
): void {
  const fn = useMemoizedFn(effect)
  useEffect(() => {
    const observer = new MutationObserver((mutationRecords, observer) => {
      // console.log(mutationRecords, observer)
      fn()
    })
    if (!targetRef.current) return
    /**
     * options:
     * 1、childList - 设置true，表示观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
     * 2、attributes - 设置true，表示观察目标属性的改变
     * 3、characterData - 设置true，表示观察目标数据的改变
     * 4、subtree - 设置为true，目标以及目标的后代改变都会观察
     * 5、attributeOldValue - 如果属性为true或者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置
     * 6、characterDataOldValue - 如果characterData为true或省略，则相当于设置为true,表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置
     * 7、attributeFilter - 如果不是所有的属性改变都需要被观察，并且attributes设置为true或者被忽略，那么设置一个需要观察的属性本地名称（不需要命名空间）的列表
     */
    observer.observe(targetRef.current, options)
    return () => {
      observer.disconnect()
    }
  }, [targetRef])
}
